<template>
  <div class="pagination-box">
    <el-pagination
      small
      :page-size="pager.limit"
      :current-page.sync="pager.page"
      @current-change="handleCurrentPage"
      :total="pager.total"
      layout="prev,pager,next"
      :hide-on-single-page="hideOnSinglePage"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'zl-pagination',
  props: {
    pager: {
      //分页的数据
      type: Object,
      default: () => ({
        page: 1,
        limit: 10,
        total: 200
      })
    },
    hideOnSinglePage: {
      //只有一页时是否隐藏
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleCurrentPage(val) {
      this.pager.page = val
      this.$emit('currentChange')
    }
  }
}
</script>

<style scoped>
.pagination-box {
  display: inline-block;
  padding: 0;
}
.pagination-box /deep/.el-pagination--small button {
  border: none !important;
  font-size: 14px !important;
  font-weight: 400;
  color: #333131;
  line-height: 20px !important;
}
.pagination-box /deep/.el-pagination--small button:disabled {
  color: #b3b1b1 !important;
}
.pagination-box /deep/ .el-pagination--small li {
  border: none !important;
  /* width: 24px !important; */
  min-width: 20px !important;
  height: 20px !important;
  background-color: transparent !important;
}
.pagination-box /deep/ .el-pagination--small .number {
  margin-right: 10px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #333131 !important;
  line-height: 20px !important;
}
.pagination-box /deep/ .el-pagination--small .number:last-child {
  margin-right: 0px !important;
}
.pagination-box /deep/ .el-pagination--small .number:hover {
  color: #ffffff !important;
  background: #d9d9d9 !important;
  border-radius: 10px;
}
.pagination-box /deep/ .el-pagination .btn-prev {
  padding-right: 0 !important;
  margin-right: 20px;
  background-color: transparent !important;
}
.pagination-box /deep/ .el-pagination .btn-prev i {
  line-height: 19px;
  border-radius: 10px;
  border: 1px solid #999999;
  width: 20px;
  height: 20px;
}
.pagination-box /deep/ .el-pagination button[disabled] i {
  border: 1px solid #f2f2f2;
}
.pagination-box /deep/ .el-pagination .btn-next {
  padding-left: 0 !important;
  margin-left: 20px;
  background-color: transparent !important;
}
.pagination-box /deep/ .el-pagination .btn-next i {
  line-height: 19px;
  border-radius: 10px;
  border: 1px solid #999999;
  width: 20px;
  height: 20px;
}
.pagination-box /deep/ .el-pagination .btn-quicknext {
  margin-right: 10px;
}
.pagination-box /deep/ .el-pagination--small .active {
  background: #666666 !important;
  font-size: 14px !important;
  color: #ffffff !important;
  line-height: 20px !important;
  border-radius: 10px;
}
.pagination-box /deep/ .el-icon-more + .number {
  /* display: none; */
}
.pagination-box /deep/ .el-pager li:hover {
  color: #333131 !important;
}
.pagination-box /deep/.el-pagination--small button:not([disabled]) i:hover {
  border-radius: 10px;
  border: 1px solid #383838 !important;
}
.pagination-box /deep/.el-pagination--small .el-pager {
  position: relative;
  top: 1px;
}
</style>
